<template>
	<div>
		<u-action-sheet :list="list" v-model="show" @click="click"></u-action-sheet>
		<div class="card-back">
			个性化导航栏设置
			<p class="order">（长按拖动调整顺序）</p>
		</div>
		<view class="card-top">
			
			<view class="head-portrait" v-for="(item, index) in topIconList" :key="index">
				<view class="badge">
          <u-icon name="minus-circle-fill" color="#a7aca6" size="40" ></u-icon>					
					</view>
				<u-icon :name="item.name" color="#366DF6" size="80" :label="item.text" label-pos="bottom" margin-top="20" label-color="black">
				</u-icon>
			
			</view>
		</view>
		<view class="card-center">
			<text>全部</text>
		</view>
		<view class="card-bottom">
			<view class="head-portrait"  v-for="(item, index) in iconList" :key="index">
				<view class="badge">
				  <u-icon name="plus-circle-fill" size="40" color="#366DF6"></u-icon>
					</view>
				<u-icon :name="item.name" color="#366DF6" size="80" :label="item.text" label-pos="bottom" margin-top="20" label-color="black"></u-icon>
			</view>
		</view>
	</div>
</template>

<script>
export default {
	data() {
		return {
			//top导航栏icon图标数组
			topIconList: [
				{
					name: 'account-fill', //icon 的图标名字
					text: '我的' //icon图标的文本
				},
				{
					name: 'bag-fill', //icon 的图标名字
					text: '公海' //icon图标的文本
				},
				{
					name: 'order', //icon 的图标名字
					text: '合同' //icon图标的文本
				},
				{
					name: 'coupon-fill', //icon 的图标名字
					text: '回款' //icon图标的文本
				},
				{
					name: '', //icon 的图标名字
					text: '' //icon图标的文本
				},
			],
			
			//常用功能icon图标的数组
			iconList: [
				{
					name: 'home-fill', //icon 的图标名字
					text: '首页' //icon图标的文本
				},
				{
					name: 'calendar-fill', //icon 的图标名字
					text: '商机' //icon图标的文本
				},
				{
					name: 'man-add-fill', //icon 的图标名字
					text: '客户' //icon图标的文本
				},
				{
					name: 'file-text-fill', //icon 的图标名字
					text: '产品' //icon图标的文本
				},
				{
					name: 'phone', //icon 的图标名字
					text: '线索' //icon图标的文本
				},
				{
					name: 'minus-square-fill', //icon 的图标名字
					text: '任务' //icon图标的文本
				},
				
			],
			//配置弹出框的配置数组
			list: [
				// {text: '点赞',color: 'blue',fontSize: 28,subText: '感谢您的点赞'},
				{ text: '快速入口设置' },
				{ text: '常用功能设置' }
			],
			//配置弹出框的标识
			show: false
		};
	},
	//方法
	methods: {
		set() {
			this.show = true;
		},
		click(index) {
			console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`);
		}
	}
};
</script>

<style scoped lang="scss">
.card-back {
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	z-index: -1;
	font-size: 34rpx;
	font-weight: 700;
	float: left;
	padding-left: 20rpx;
	color: #212121;
	.order {
		float: right;
		margin-right: 100rpx;
		font-weight: 500;
		color: #6a6a6a;
	}
}
.card-top {
	// width: 90%;
	// height: 200rpx;
	background: #fff;
	display: flex;
	margin: 0 auto;
	flex-wrap: wrap;
	
	padding-left: 20rpx;
	text-align: center;
	.head-portrait {
		display: flex;
		align-items: center;
		justify-content:center;
		height: 156rpx;
		width: 156rpx;
		border-radius: 30rpx;
		background-color: #fff;
		margin: 15rpx 15rpx 0 0;
		box-shadow: #e4e7ed 10rpx 5rpx 20rpx 5rpx; //边框阴影
		position: relative;
		.badge{
			position: absolute;
			top: -25rpx;
			right: -10rpx;
			
		}
		
	}
		
}
.card-center {
	margin: 60rpx 50rpx;
	height: 60rpx;
	line-height: 60rpx;
	text {
		font-size: 34rpx;
		font-weight: 700;
		float: left;
	}
	
}
.card-bottom {
	background: #fff;
	display: flex;
	margin: 0 auto;
	flex-wrap: wrap;
	padding-left: 20rpx;
	text-align: center;
	.head-portrait {
		display: flex;
		align-items: center;
		justify-content:center;
		height: 156rpx;
		width: 156rpx;
		border-radius: 30rpx;
		background-color: #fff;
		margin: 15rpx 15rpx 0 0;
		box-shadow: #e4e7ed 10rpx 5rpx 20rpx 5rpx; //边框阴影
		position: relative;
		.badge{
			position: absolute;
			top: -35rpx;
			right: -90rpx;
		}
		u-icon {
			float: right;
			border-radius: 20rpx;
			width: 130rpx;
			padding-left: 40rpx;
			height: 60rpx;
			margin-top: 10rpx;
		}
		}
	
}
</style>
